<template>
  <NavBar safe-area-inset-top title="卡单详情"
    :left-arrow="true" @click-left="handleBack" />
  <div class="record-detail">
    <div class="record-container"
      v-if="(stateCardDetail.data.length)">

      <OrderDisplayCard
        :data="stateCardDetail.data[0]"
        v-if="!stateCardDetail.loading" />

      <OrderNoInfo
        :total-count="stateCardDetail.data[0].totalCount"
        :order="stateCardDetail.data[0].cardInfo"
        v-if="!stateCardDetail.loading" />

      <OrderNoList
        :list="stateCardDetail.data[0].cardOrderDetailVoList"
        v-if="!stateCardDetail.loading" />
    </div>
    <SkeletonCategory
      v-if="stateCardDetail.loading" />
    <SkeletonCard
      v-if="stateCardDetail.loading" />
    <Empty
      v-if="!stateCardDetail.data.length && !stateCardDetail.loading"
      description="暂无数据" />
  </div>
</template>
<script setup lang="ts">
import {
  Empty, NavBar, showFailToast,
} from 'vant';
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

import SkeletonCard from '@/components/SkeletonCard.vue';
import SkeletonCategory from '@/components/SkeletonCategory.vue';

import OrderDisplayCard from '../components/OrderDisplayCard.vue';
import OrderNoInfo from '../components/OrderNoInfo.vue';
import OrderNoList from '../components/OrderNoList.vue';
import useCardOrderActions from '../hooks/useCardOrderActions';

const route = useRoute();
const router = useRouter();
const { state: stateCardDetail, fetchData: fetchCardDetail } = useCardOrderActions();

onMounted(async () => {
  const { id } = route.params;
  if (id) {
    await fetchCardDetail(`${id}`);
  } else {
    showFailToast('缺少订单id');
  }
});

const handleBack = () => {
  router.replace({ name: 'SellRecords' });
};
</script>
<style lang="less" scoped>
.record-detail {
  height: 100%;
  display: flex;
  flex-direction: column;

  .record-container {
    flex-grow: 1;
  }
}
</style>
